<template>
  <view class="demo-component">
    <button @click="calculate">计算</button>
  </view>
</template>

<script setup>
import { defineProps, defineEmits } from 'vue';

// 定义接收的属性
const props = defineProps({
  num1: {
    type: Number,
    default: 0
  },
  num2: {
    type: Number,
    default: 0
  },
  operator: {
    type: String,
    default: '+'
  }
});

// 定义触发的事件
const emit = defineEmits(['calculateResult']);

// 计算函数
const calculate = () => {
  let result;
  switch(props.operator) {
    case '+':
      result = props.num1 + props.num2;
      break;
    case '-':
      result = props.num1 - props.num2;
      break;
    case '*':
      result = props.num1 * props.num2;
      break;
    case '/':
      if(props.num2 === 0) {
        emit('calculateResult', '错误：除数不能为零');
        return;
      }
      result = props.num1 / props.num2;
      break;
    default:
      result = '不支持的运算符';
  }
  emit('calculateResult', result);
};
</script>

<style scoped>
.demo-component {
  padding: 20rpx;
  background-color: #f5f5f5;
  border-radius: 10rpx;
}
</style>